<script setup>
import { ref, watch, onMounted } from "vue";
import { WalletFilled, Fold, ArrowDown } from "@element-plus/icons-vue";
import { ClickOutside } from "element-plus";
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const userStatus = ref(null);
const excel=ref(null)
// 使用onMounted确保在服务端渲染(SSR)环境中不会出错
onMounted(() => {
  userStatus.value = localStorage.getItem('userStatus');
  excel.value = localStorage.getItem('excle');
});
const headerArr = ref([
  { name: '分類', path: '/SWAP' },
  { name: '主題', path: '/ANAL' },
  { name: '媒體', path: '/RUNE' },
])
const router = useRouter()
const tofirr=()=>{
  router.push({
    path: '/POOL'
  })
}
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize);

// const tis=[
//   {
//     img:"https://cdn.quickper.com/media/tagskin/product/3c060019-69e6-4b8e-99c1-ae62d039e967/origin.gif",
//     name:"保健"
//   },
//   {
//     img:"https://cdn.quickper.com/media/tagskin/product/483f787f-de13-4035-afe8-bb7ba150313f/origin.gif",
//     name:"生活"
//   },
//   {
//     img:"https://cdn.quickper.com/media/tagskin/product/1cf1a100-fa30-4f39-aed5-8a497ac30a66/w90h90t1.png",
//     name:"保健"
//   },
//   {
//     img:"https://cdn.quickper.com/media/tagskin/product/a319be35-e0d3-4d9c-957b-2212cff090fa/w90h90t1.png",
//     name:"服饰"
//   },
//   {
//     img:"https://cdn.quickper.com/media/tagskin/product/483f787f-de13-4035-afe8-bb7ba150313f/origin.gif",
//     name:"美食"
//   },
// ]
const drawer = ref(false)
const tofenlei=()=>{
  drawer.value=true
}
const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
    })
}
const close=()=>{
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      drawer.value=false
    })
    .catch(() => {
    })
}
const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
const ever1=[
  {name:"FIRR"},
  {name:"OMMH"},
  {name:"TAG SKIN"},
  {name:"保养"},
  {name:"保健"},
  {name:"生活"},
  {name:"服饰"},
  {name:"美食"},
  {name:"购物"}
]
const ever2=[
  {name:"醒久鯨｜限時開團優惠"},
  {name:"SANSUI品牌系列｜開團優惠中"},
  {name:"週二免運日"},
  {name:"新品"},
  {name:"減價"}
]
const ever3=[
  {name:"查看全部"},
  {name:"部落格"},
  {name:"報導"}
]
const toSWAP=()=>{
  router.push({
    path: '/SWAP'
  })
}
const toHOME=()=>{
  router.push({
    path: '/'
  })
}
const toRUNE=()=>{
  router.push({
    path: '/RUNE'
  })
}
const toLOGIN=()=>{
  router.push({
    path: '/LOGIN'
  })
}
const toSIGN=()=>{
  router.push({
    path: '/SIGN'
  })
}
const showgouwuche=ref(false)
const showdel=()=>{
  showgouwuche.value=true
}
const lookdel=()=>{
  showgouwuche.value=false
}
const toORDER=()=>{
  router.push({
    path: '/ORDER'
  })
}
const yin=ref(true)
const sousuo=()=>{
  yin.value=false
}
const dissousuo=()=>{
  yin.value=true
}
const xianshishow=ref(false)
const xianshi=()=>{
  xianshishow.value=!xianshishow.value
  router.push({
    path: '/USER'
  })
}
</script>

<template>
<div>
  <div v-if="innerWidth" style="border-bottom: 1px solid #000; height: 80px; line-height: 80px;">
    <el-row>
      <el-col :xs="2" :sm="4" :md="2">
        <div class="grid-content ep-bg-purple" />
      </el-col>
        <el-col :xs="12" :sm="2" :md="10">
        <div class="KOheader" style="position: absolute; left: 30px;">
          <el-link type="primary">
            <router-link to="/">
              <img style="width: 39%; height: 39%;" src="https://cdn.quickper.com/media/tagskin/store/logo/1acbb5b0-ba38-4b55-b1ec-63a2b705d868/h120.png" alt="">
            </router-link>
          </el-link>
          <el-link type="primary" v-for="(item, index) in headerArr" :key="index" class="phone">
            <div style="position: relative; left: -230px;">
              <router-link :to="item.path">
              <span>
                {{ item.name }}
              </span>
            </router-link>
            </div>
          </el-link>
        </div>
      </el-col>
      <el-col :xs="16" :sm="8" :md="6">
        <div v-if="yin" class="butotn" style="display: flex; line-height: 80px;">
          <div @click="tofirr" style="cursor: pointer; margin-right:30px; color: #000; font-size: 14px;font-weight: 700;">
            我想加入 FIRR ？
          </div>
            <div v-if="!userStatus" @click="toLOGIN" style="cursor: pointer; margin-right:30px; color: #000; font-size: 14px;font-weight: 700;">
              登入
            </div>
            <div v-if="!userStatus" @click="toSIGN" style="cursor: pointer; margin-right:30px; color: #000; font-size: 14px;font-weight: 700;">
              註冊
            </div>
          <div v-else @click="xianshi" style="position: absolute; top: 20px; right: -80px; width: 80px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid #e2e0e0; border-radius: 20px;" >
            <img style="width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/hamburger.svg" alt="">
            <img style="border-radius: 15px; width: 30px; height: 30px;" src="https://img2.baidu.com/it/u=3726660842,3936973858&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1707498000&t=9ed1e83f0a625e94833b42766a873125" alt="">
          </div>
          <div @click="toORDER" @mouseenter="showdel" @mouseleave="lookdel" style="margin-right:30px; color: #000; font-size: 14px;font-weight: 700;">
            <img style="width: 20px; height: 20px; margin-top: 30px;" src="https://cdn.quickper.com/static/img/icons/cart.svg" alt="">
          </div>
          <div @click="sousuo" style="margin-right:30px; color: #000;font-size: 14px;font-weight: 700;">
            <img style="width: 20px; height: 20px; margin-top: 30px;" src="https://cdn.quickper.com/static/img/icons/search/search.svg" alt="">
          </div>
        </div>
        <div v-else>
          <input style="position: relative; right: -338px; top: 2px; border-radius:15px ; border: none; padding-left:10px ; background-color: #f6f5f5; width: 94%; height: 35px;" type="text" placeholder="想找什麽商品">
          <div @click="dissousuo" style="position: absolute;right: 90px; top: 5px;cursor: pointer; ">X</div>
          <div style="position: absolute; cursor: pointer; text-align: center; right: 44px; top: 29px; background-color: #000; width: 30px; height: 30px; border-radius: 30px;">
            <svg style="width: 20px; height: 20px;position: relative; top: -20px;" t="1706516382930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5186" width="200" height="200"><path d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z" fill="#ffffff" p-id="5187"></path><path d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z" fill="#ffffff" p-id="5188"></path></svg>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else style="width: 100%; height: 60px;">
    <div style="display: flex; justify-content: space-between; margin-top: 10px; padding-left:20px ; padding-right:20px ;">
      <img @click="tofenlei" style="width: 20px; height: 20px; margin-top: 10px;" src="https://cdn.quickper.com/static/img/icons/hamburger.svg" alt="">
      <img style="width: 29%; height: 29%;" @click="toHOME" src="https://cdn.quickper.com/media/tagskin/store/logo/1acbb5b0-ba38-4b55-b1ec-63a2b705d868/h120.png" alt="">
      <img @click="toORDER" style="width: 20px; height: 20px; margin-top: 10px;" src="https://cdn.quickper.com/static/img/icons/cart.svg" alt="">
    </div>
    <!-- <div style="display: flex; margin-top: 20px; padding-left:20px ; padding-right:20px; overflow: hidden;" >
      <div style="width: 60px; margin-right: 20px;" v-for="item,index in tis" :key="index">
          <img style="border: 2px solid #c93961; border-radius: 50%; width: 60px; height: 60px;" :src=item.img alt="">
          <div style="text-align: center;">{{ item.name }}</div>
      </div>
    </div>
    <div style="margin-top: 20px; font-weight: 700; background-color: #f6f5f5; width: 100%; height: 60px; line-height: 60px; text-align: center;">
        我想加入 FIRR ？
    </div> -->
  </div>
  <!-- 抽屉 -->
  <el-drawer
    v-model="drawer"
    title=""
    :direction="direction"
    :before-close="handleClose"
    :close-on-press-escape="true"
    :show-close="false"
  >
    <div @click="close" style="position: absolute; left: 20px; top: 20px; font-weight: 700;">X</div>
      <input style="border-radius:15px ; border: none; padding-left:10px ; background-color: #f6f5f5; width: 94%; height: 35px;" type="text" placeholder="想找什麽商品">
      <div style="position: absolute; text-align: center; right: 44px; top: 74px; background-color: #000; width: 30px; height: 30px; border-radius: 30px;">
        <svg style="width: 20px; height: 20px; margin-top: 5px;" t="1706516382930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5186" width="200" height="200"><path d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z" fill="#ffffff" p-id="5187"></path><path d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z" fill="#ffffff" p-id="5188"></path></svg>
    </div>
    <!-- 选项卡 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="分類" name="first">
        <div style="margin-top: 20px; font-weight: 700;" @click="toSWAP">查看全部</div>
        <div v-for="item in ever1" :key="item" style="display: flex; justify-content: space-between;">
          <div style="font-weight: 700; margin-top: 20px;">{{ item.name }}</div>
          <div style="margin-top: 20px; font-weight: 700;">></div>
        </div>
        <div style="border-top: 1px solid #f6f5f5; margin-top: 20px; ">
          <div @click="toLOGIN" style="font-weight: 700; margin-top: 20px;">登入</div>
          <div @click="toSIGN" style="font-weight: 700; margin-top: 20px;">注册</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="主题" name="second">
        <div v-for="item in ever2" :key="item" @click="toSWAP" style="display: flex; justify-content: space-between;">
          <div style="font-weight: 700; margin-top: 20px;">{{ item.name }}</div>
          <div style="margin-top: 20px; font-weight: 700;">></div>
        </div>
        <div style="border-top: 1px solid #f6f5f5; margin-top: 20px; ">
          <div @click="toLOGIN" style="font-weight: 700; margin-top: 20px;">登入</div>
          <div @click="toSIGN" style="font-weight: 700; margin-top: 20px;">注册</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="媒體 " name="third">
        <div v-for="item in ever3" :key="item" @click="toRUNE" style="display: flex; justify-content: space-between;">
          <div style="font-weight: 700; margin-top: 20px;">{{ item.name }}</div>
          <div style="margin-top: 20px; font-weight: 700;">></div>
        </div>
        <div style="border-top: 1px solid #f6f5f5; margin-top: 20px; ">
          <div @click="toLOGIN" style="font-weight: 700; margin-top: 20px;">登入</div>
          <div @click="toSIGN" style="font-weight: 700; margin-top: 20px;">注册</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
  <div v-if="showgouwuche" style="margin: 0 auto; position: absolute; z-index: 999; border: 1px solid #f6f5f5; right: 8%; top: 60px; border-radius: 20px; width: 400px; height: 300px;background-color: #fff;">
    <div style="text-align: center;margin-top: 20%;">購物車內目前尚無商品</div>
    <button style="width: 80%; height: 40px; position: relative; top: 40%; left: 50%; transform: translateX(-50%);  background-color: #000; color: #fff; border-radius: 10px;">檢視購物車 </button>
  </div>
  <div v-if="xianshishow" style="padding-left: 10px; margin: 0 auto; position: absolute; z-index: 999; border: 1px solid #f6f5f5; right: 4%; top: 60px; border-radius: 20px; width: 250px; height: 270px;background-color: #fff;">
    <div style="margin-top: 10px; font-weight: 700;">name</div>
    <div style="width: 100%; height: 50px;">13166128825</div>
    <div style="padding-top: 10px; line-height: 30px; border-top: 1px solid #e2e0e0;">
      <div style="font-weight: 700;">所有订单</div>
      <div style="font-weight: 700;">订单商品</div>
      <div style="font-weight: 700;">个人资料</div>
      <div style="font-weight: 700;">修改密码</div>
      <div style="font-weight: 700;">登出</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
#span {
  font-weight: 700;
  font-family: 楷体;
  color: rgb(242, 35, 116);
  font-size: 14px;
}

@media screen and (max-width: 1000px) {
  .phone {
    display: none;
  }
}

@media screen and (min-width: 1000px) {
  .phoneList {
    display: none;
  }
}
.el-link {
  margin-right: 28px;
  font-weight: normal;
  line-height: 3.125rem;

  & span {
    color: #000;
    // color: white;
    font-weight: 700;
    font-size: 14px;
    vertical-align: middle;

    & img {
      // width: 1.875rem;
      height: 1.875rem;
      vertical-align: middle;
    }
  }
}

.butotn {
  margin-left: 4px;
  height: 3.5rem;
  line-height: 3.5rem;
  position: absolute;
  right: 9%;
  top: 0;
}
// .demo-tabs > .el-tabs__content {
//   padding: 32px;
//   color: #0a0b0b !important;
//   font-size: 32px;
//   font-weight: 600;
// }


.iocnclass {
  height: 4.2rem;
}

.el-dropdown {
  height: 4.2rem;
  line-height: 4.2rem;
  border: none;
}
::v-deep{
  .el-drawer{
  width: 100% !important;
}
.el-drawer__close-btn{
  color: #000 !important;
}
.el-tabs__item.is-active {
  color: #000 !important;
  // border-bottom:2px solid #000 ;
}
.el-tabs__nav-wrap::after{
  width: 0;
}
}

.el-button {
  // background-color: rgb(105, 56, 151);
  background: linear-gradient(to right, rgb(198, 66, 189), rgb(120, 150, 255));
  border: 0;
  // color: white;
  margin-right: .625rem;
}

::v-deep .el-icon {
  color: rgb(255, 255, 255);
}

.showlog{
  width: 120px;
  height: 100px;
  position: absolute;
  right: 6.5%;
  top: 80%;
  border-radius: 10px;
}
</style>